<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人网页-查询界面</title>
    <style>   /*对最上面div一行的样式设置*/
        .up{    /*对最上面的布局大小设置*/
            width: 50%;
            height:50px;
        }    /*对中间div布局的设置*/
        #medium {
            width: 100%;
            height: 400px;
            float: none;
        }
        /*对最下面的div设置*/
        #bottle{
            width: 100%;
            height: 400px;
            float: none;
        }
        /*对左上div里面的a标签的设置*/
        div#left-up>a {
            float: left;
            position: relative;
            top: 10px;
            font-size: x-large;
            width: 95px
        }
        div#right-up span{
            position: relative;
            top: 10px;
            font-size: x-large;
            float: right;
            width: 60px;
        }

        .image{
             position: relative;
            top: 10px;
            width: auto;
            height: 30px;
            float: right;
        }
        /*对最下面百度热搜的设置*/
        #bottle>a{
            position: relative;
            width: 10%;
            font-size: x-large;
        }
        ul.bt-left>li{
            position: relative;
            top: 50px;
            left: 350px;
            font-size: x-large;
        }
        ul.bt-right>li{
            position: relative;
            top: 17px;
            left: 100px;
            font-size: x-large;
        }
    </style>
</head>
<body>
        <!--百度最左上角的连接-->
    <div id="left-up" class="up" style="float: left" >
        <a  href="http://news.baidu.com" target="_blank"  >新闻</a>
        <a  style="width: 130px" href="https://www.hao123.com" target="_blank"  >hao123</a>
        <a  href="http://map.baidu.com" target="_blank"  >地图</a>
        <a  href="https://haokan.baidu.com/?sfrom=baidu-top" target="_blank" >视频</a>
        <a  href="http://tieba.baidu.com" target="_blank" >贴吧</a>
        <a  href="http://xueshu.baidu.com" target="_blank" >学术</a>
        <a  href="http://www.baidu.com/more/"  target="_blank">更多</a>
    </div>
        <!--百度最右上角的连接-->
    <div id="right-up" class="up"  style="float: right">
        <!--对个人登录的设置-->
        <a   href="http://i.baidu.com/" target="_blank">
            <img  class="image" src="https://himg.bdimg.com/sys/portraitn/item/94bd0053">
            <span  >my</span>
        </a>
        <!--对天气的设置-->
        <a  href="//www.baidu.com/s?tn=baidutop10&amp;rsv_idx=2&amp;wd=%E9%95%BF%E6%B2%99%E5%A4%A9%E6%B0%94%E9%A2%84%E6%8A%A5" target="_blank">
            <div  id="weather-set" class="right-Up">
                <span  data-key="长沙"  >长沙</span>
                <img class="image" src="https://dss3.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/weather/icons/a0.png">
                <span style="width: 50px">30℃</span>

            </div>
        </a>
        <!--高考加油的栏-->
        <a class="right-Up" href="https://www.baidu.com/s?wd=%E9%AB%98%E8%80%83&amp;sa=searchpromo_gk_pc_ysj" target="_blank">
            <span style="width: 120px">高考加油</span></a>
    </div>
        <!--中间的布局-->
    <div id="medium" >     <!--存放图标和搜索栏-->
        <!--百度图标-->
        <img style="width: 300px;height: 150px;position: relative;top:68px; left: 650px " src="//www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" >
        <form name="search" id="form" style="position: absolute;top: 300px;left: 450px" >
            <input style="width: 680px;height: 30px" type="text" class="search" name="find" id="kw" >
            <input type="button" value="问度娘" style=" position: relative; top: 7px;height:35px;width:80px;font-size: x-large">
        </form>
    </div>
        <!--最下面的div-->
    <div id="bottle">
        <a href="http://top.baidu.com/?fr=mhd_card" target="_blank" style="align-self: center">百度热榜</a>
        <!--左边的热搜-->
        <div id="bottle-left" class="bt-left" style="float: left;width:50%;">
            <ul class="bt-left">
                <li data-index="0">
                    <a  href="https://www.baidu.com/s?cl=3;" target="_blank">
                        <span class="title-content-title">警方介入老人被狗绳绊倒身亡事件</span>
                    </a>
                </li>
                <li data-index="1">
                    <a  href="https://www.baidu.com/s?cl=3&amp;tn=baidutop10&amp;fr=top1000&amp;wd=%E5%A4%96%E4%BA%A4%E9%83%A8%E5%9B%9E%E5%BA%94%E7%BE%8E%E5%86%8D%E6%AC%A1%E5%8D%87%E7%BA%A7%E5%AF%B9%E5%8D%8E%E4%B8%BA%E7%A6%81%E4%BB%A4&amp;rsv_idx=2&amp;rsv_dl=fyb_n_homepage&amp;hisfilter=1" target="_blank">
                        <span >外交部回应美再次升级对华为禁令</span>
                    </a>
                </li>
                <li data-index="2">
                    <a class="title-content c-link c-font-medium c-line-ellipsis" href="https://www.baidu.com/s?cl=3&amp;tn=baidutop10&amp;fr=top1000&amp;wd=%E6%9D%8E%E6%B9%98%E7%8E%8B%E5%B2%B3%E4%BC%A6%E5%90%8D%E4%B8%8B%E5%85%AC%E5%8F%B8%E5%B7%B2%E6%B3%A8%E9%94%80&amp;rsv_idx=2&amp;rsv_dl=fyb_n_homepage&amp;hisfilter=1" target="_blank">
                        <span >李湘王岳伦名下公司已注销</span>
                    </a>
                </li>
                <li  data-index="3">
                    <a class="title-content c-link c-font-medium c-line-ellipsis" href="https://www.baidu.com/s?cl=3&amp;tn=baidutop10&amp;fr=top1000&amp;wd=%E5%A5%A5%E5%B7%B4%E9%A9%AC%E5%A4%AB%E4%BA%BA%E7%82%AE%E8%BD%B0%E7%89%B9%E6%9C%97%E6%99%AE&amp;rsv_idx=2&amp;rsv_dl=fyb_n_homepage&amp;hisfilter=1" target="_blank">
                        <span class="title-content-title">奥巴马夫人炮轰特朗普</span>
                    </a>
                </li>
                <li  data-index="4">
                    <a class="title-content c-link c-font-medium c-line-ellipsis" href="https://www.baidu.com/s?cl=3&amp;tn=baidutop10&amp;fr=top1000&amp;wd=%E5%9B%9B%E5%B7%9D8100%E5%90%A8%E9%87%8D%E8%BD%A6%E5%8E%8B%E6%A2%81%E5%BA%94%E5%AF%B9%E6%B4%AA%E5%B3%B0%E8%BF%87%E5%A2%83&amp;rsv_idx=2&amp;rsv_dl=fyb_n_homepage&amp;hisfilter=1" target="_blank">
                        <span class="title-content-title">四川8100吨重车压梁应对洪峰过境</span>
                    </a>
                </li>
            </ul>
        </div>
        <!--右边的热搜-->
        <div id="bottle-right" class="bt-right" style="float: right;width: 50%;">
            <ul class="bt-right">
                <li data-index="5">
                    <a class="title-content c-link c-font-medium c-line-ellipsis" href="https://www.baidu.com/s?cl=3&amp;tn=baidutop10&amp;fr=top1000&amp;wd=%E4%B8%8A%E6%B5%B7%E5%B8%82%E5%89%AF%E5%B8%82%E9%95%BF%E9%BE%9A%E9%81%93%E5%AE%89%E8%A2%AB%E6%9F%A5&amp;rsv_idx=2&amp;rsv_dl=fyb_n_homepage&amp;hisfilter=1" target="_blank">
                        <span class="title-content-title">上海市副市长龚道安被查</span>
                    </a>
                </li>
                <li  data-index="6">
                    <a class="title-content c-link c-font-medium c-line-ellipsis" href="https://www.baidu.com/s?cl=3&amp;tn=baidutop10&amp;fr=top1000&amp;wd=%E9%81%AD%E9%A3%9E%E8%A1%8C%E5%91%98%E6%95%A3%E5%8F%91%E4%B8%8D%E9%9B%85%E7%85%A7%E5%A5%B3%E5%AD%A9%E5%8F%91%E5%A3%B0&amp;rsv_idx=2&amp;rsv_dl=fyb_n_homepage&amp;hisfilter=1" target="_blank">
                        <span class="title-content-title">遭飞行员散发不雅照女孩发声</span>
                    </a>
                </li>
                <li  data-index="7">
                    <a class="title-content c-link c-font-medium c-line-ellipsis" href="https://www.baidu.com/s?cl=3&amp;tn=baidutop10&amp;fr=top1000&amp;wd=2021%E5%B9%B4%E6%98%A5%E6%99%9A%E5%B7%B2%E5%BB%BA%E7%BB%84%E7%AD%B9%E5%A4%87&amp;rsv_idx=2&amp;rsv_dl=fyb_n_homepage&amp;hisfilter=1" target="_blank">
                        <span class="title-content-title">2021年春晚已建组筹备</span>
                    </a>
                </li>
                <li data-index="8">
                    <a class="title-content c-link c-font-medium c-line-ellipsis" href="https://www.baidu.com/s?cl=3&amp;tn=baidutop10&amp;fr=top1000&amp;wd=%E5%BF%85%E8%83%9C%E5%AE%A2%E4%B8%AD%E5%9B%BD%E5%9B%9E%E5%BA%94%E7%BE%8E%E5%9B%BD%E9%97%A8%E5%BA%97%E5%85%B3%E9%97%AD&amp;rsv_idx=2&amp;rsv_dl=fyb_n_homepage&amp;hisfilter=1" target="_blank">
                        <span class="title-content-title">必胜客中国回应美国门店关闭</span>
                    </a>
                </li>
                <li data-index="9">
                    <a class="title-content c-link c-font-medium c-line-ellipsis" href="https://www.baidu.com/s?cl=3&amp;tn=baidutop10&amp;fr=top1000&amp;wd=4%E5%B2%81%E5%A5%B3%E7%AB%A5%E8%A2%AB%E9%94%81%E5%B9%BC%E5%84%BF%E5%9B%AD%E4%BA%8C%E6%A5%BC%E5%8F%8D%E6%80%9D%E5%9D%A0%E6%A5%BC&amp;rsv_idx=2&amp;rsv_dl=fyb_n_homepage&amp;hisfilter=1" target="_blank">
                        <span class="title-content-title">4岁女童被锁幼儿园二楼反思坠楼</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>